import { useState, useEffect } from "react";
import { Table, Form, Button, Input, DatePicker } from "antd";

const queryHistory = async (params, setDataSource, setTotal) => {
  console.log(params);
  const queryString = new URLSearchParams(params).toString();
  const res = await fetch(`/api/ping.json?${queryString}`);
  if (res.ok) {
    const pings = await res.json();
    if (pings.length == 10) {
      setTotal(params.page * 10 + 1);
    } else {
      setTotal((params.page - 1) * 10 + pings.length);
    }
    setDataSource(pings);
  }
};

const FormSearch = ({ className, setQueryParams, setDataSource, setTotal }) => {
  const onFinish = (formData) => {
    console.log(formData);
    let params = {
      page: 1,
      ip: formData.ip,
    };
    if (formData.startTime) {
      params.startTime = formData.startTime.format("YYYY-MM-DD HH:mm:ss");
    }
    if (formData.endTime) {
      params.endTime = formData.endTime.format("YYYY-MM-DD HH:mm:ss");
    }
    setQueryParams(params);
    queryHistory(params, setDataSource, setTotal);
  };

  return (
    <>
      <Form
        layout="inline"
        onFinish={onFinish}
        initialValues={{
          ip: "",
          startTime: "",
          endTime: "",
        }}
        className={className}
      >
        <Form.Item
          label="IP:"
          name="ip"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input placeholder="请输入IP地址" />
        </Form.Item>
        <Form.Item
          label="开始时间:"
          name="startTime"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item
          label="结束时间:"
          name="endTime"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

function History() {
  const [dataSource, setDataSource] = useState([]);
  const [queryParams, setQueryParams] = useState({});
  const [page, setPage] = useState(1);
  const [total, setTotal] = useState(0);

  const columns = [
    {
      title: "节点",
      dataIndex: "Target",
      align: "center",
    },
    {
      title: "时间",
      dataIndex: "LogTime",
      align: "center",
    },
    {
      title: "最大延迟[ms]",
      dataIndex: "MaxDelay",
      align: "center",
    },
    {
      title: "平均延迟[ms]",
      dataIndex: "AvgDelay",
      align: "center",
    },
    {
      title: "最小延迟[ms]",
      dataIndex: "MinDelay",
      align: "center",
    },
    {
      title: "丢包率[%]",
      dataIndex: "LossPk",
      align: "center",
    },
  ];

  const onPageChange = async (page) => {
    let params = queryParams;
    params.page = page;
    setPage(page);
    queryHistory(params, setDataSource, setTotal);
  };

  return (
    <>
      <FormSearch
        className={"formSearch"}
        setQueryParams={setQueryParams}
        setDataSource={setDataSource}
        setTotal={setTotal}
      ></FormSearch>
      <Table
        dataSource={dataSource}
        columns={columns}
        pagination={{
          page,
          pageSize: 10,
          total,
          onChange: (page) => onPageChange(page),
          showSizeChanger: false,
        }}
      />
      ;
    </>
  );
}

export default History;
